<!--历史地震数据-->
<template>
  <div id="baiduMap" @touchstart.passive="true">
    <baidu-map id="map"
               :zoom="map.zoom"
               :center="{lng: map.center.lng, lat: map.center.lat}"
               :scroll-wheel-zoom="true">
      <!--  点  -->
      <div v-for="(person, index) in lngLat" :key="index">
        <bm-marker :position="person" :dragging="true"
                   :icon="{url: a5, size: {width: 32, height: 32}}">
          <bm-label :content="lngNam[index]"
                    :labelStyle="{border: 'none',backgroundColor: 'rgba(0, 0, 0, -1)',color: '', fontSize : '12px'}"
                    :offset="{width: 0, height: 0}"/>
        </bm-marker>
      </div>
      <div v-for="(person, index) in lngLat1" :key="index">
        <bm-marker :position="person" :dragging="true"
                   :icon="{url: a4, size: {width: 32, height: 32}}">
          <bm-label :content="lngNam1[index]"
                    :labelStyle="{border: 'none',backgroundColor: 'rgba(0, 0, 0, -1)',color: '', fontSize : '12px'}"
                    :offset="{width: 0, height: 0}"/>
        </bm-marker>
      </div>
      <div v-for="(person, index) in lngLat2" :key="index">
        <bm-marker :position="person" :dragging="true"
                   :icon="{url: a3, size: {width: 32, height: 32}}">
          <bm-label :content="lngNam2[index]"
                    :labelStyle="{border: 'none',backgroundColor: 'rgba(0, 0, 0, -1)',color: '', fontSize : '12px'}"
                    :offset="{width: 0, height: 0}"/>
        </bm-marker>
      </div>
      <div v-for="(person, index) in lngLat3" :key="index">
        <bm-marker :position="person" :dragging="true"
                   :icon="{url: a2, size: {width: 32, height: 32}}">
          <bm-label :content="lngNam3[index]"
                    :labelStyle="{border: 'none',backgroundColor: 'rgba(0, 0, 0, -1)',color: '', fontSize : '12px'}"
                    :offset="{width: 0, height: 0}"/>
        </bm-marker>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import a5 from "@/assets/imgs/a5.png";
import a4 from "@/assets/imgs/a4.png";
import a3 from "@/assets/imgs/a3.png";
import a2 from "@/assets/imgs/a2.png";
export default {
  name: "SeismMap",
  data() {
    return {
      points: [],
      map: {
        center: {
          lng: 106.663408,
          lat: 26.589004
        },
        zoom: 10
      },
      a5,
      a4,
      a3,
      a2,
      lngLat: [],
      lngNam: [],
      lngLat1: [],
      lngNam1: [],
      lngLat2: [],
      lngNam2: [],
      lngLat3: [],
      lngNam3: [],
    };
  },
  mounted() {

    this.$axios.post('/api/vis/data1', {
      "param": "5A"
    }).then(res =>{
      if(res.data.code === 20041) {
        for (let i = 0; i < res.data.data.length; i++) {
          this.lngNam.push(res.data.data[i]["param"])
          this.lngLat.push(
              {
                lng: res.data.data[i]["param3"],
                lat: res.data.data[i]["param4"]
              }
          );
        }
      }else {
        this.open2('数据请求失败');
      }
    }).catch(error =>{
      console.log(error)
      this.open4("系统出错了")
    });

    // this.$axios.post('/api/vis/data1', {
    //   "param": "4A"
    // }).then(res =>{
    //   if(res.data.code === 20041) {
    //     for (let i = 0; i < res.data.data.length; i++) {
    //       this.lngNam1.push(res.data.data[i]["param"])
    //       this.lngLat1.push(
    //           {
    //             lng: res.data.data[i]["param3"],
    //             lat: res.data.data[i]["param4"]
    //           }
    //       );
    //     }
    //   }else {
    //     this.open2('数据请求失败');
    //   }
    // }).catch(error =>{
    //   console.log(error)
    //   this.open4("系统出错了")
    // });
    //
    // this.$axios.post('/api/vis/data1', {
    //   "param": "3A"
    // }).then(res =>{
    //   if(res.data.code === 20041) {
    //     for (let i = 0; i < res.data.data.length; i++) {
    //       this.lngNam2.push(res.data.data[i]["param"])
    //       this.lngLat2.push(
    //           {
    //             lng: res.data.data[i]["param3"],
    //             lat: res.data.data[i]["param4"]
    //           }
    //       );
    //     }
    //   }else {
    //     this.open2('数据请求失败');
    //   }
    // }).catch(error =>{
    //   console.log(error)
    //   this.open4("系统出错了")
    // });
    //
    // this.$axios.post('/api/vis/data1', {
    //   "param": "2A"
    // }).then(res =>{
    //   if(res.data.code === 20041) {
    //     for (let i = 0; i < res.data.data.length; i++) {
    //       this.lngNam3.push(res.data.data[i]["param"])
    //       this.lngLat3.push(
    //           {
    //             lng: res.data.data[i]["param3"],
    //             lat: res.data.data[i]["param4"]
    //           }
    //       );
    //     }
    //   }else {
    //     this.open2('数据请求失败');
    //   }
    // }).catch(error =>{
    //   console.log(error)
    //   this.open4("系统出错了")
    // });


  },
  unmount () {
    this.distanceTool && this.distanceTool.close()
  },
  methods: {
    open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    openDistanceTool (e) {
      // const {distanceTool} = this
      this.distanceTool && this.distanceTool.open()
      console.log(e)
    },
    // 点
  },
};
</script>

<!--css-->
<style scoped>

#baiduMap{
  height: 100%;
  width: 100%;
}
#baiduMap #map {
  width: 100%;
  height: 100%;
}
</style>